<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            border: 0;
        }
        body{
            font-family: 'Microsoft YaHei', SimHei, SimSun, sans-serif;
            font-size: 12px;
            font-style: normal;
            font-variant: normal;
            font-weight: normal;
            font-stretch: normal;
            line-height: 18px;
            overflow-x: hidden;
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
            color: black;
        }
        .waikuang{
            width: 1210px;
            height: 58px;
        }
        .hezuo{
            margin-top: 10px;
            float: left;
            width: 94px;
            height: 32px;
            line-height: 32px;
            color: #5e5e5e;
            font-size: 16px;
        }
        .yincang{
            float: left;
            width: 1111px;
            height: 28px;
            margin-top: 13px;
            background-color: #EAECF1;
            overflow: hidden;
        }
        #lunbo{
            float: left;
            width: 77px;
            height: 28px;
        }
        .clear{
            position: relative;
            width: 10000%;
            height: 28px;
        }
        .clear img{
            position: relative;
            top: 0;
            right: 0;
            width: 77px;
            height: 28px;
            float: left;
            margin-right: 25px;
        }
        .bottom{
            width: 250px;
            height: 20px;
        }
        .bottom span{
            display: inline-block;
            overflow: hidden;
            height: 0;
            width: 0;
            margin-left: 5px;
            text-align: center;
        }
        .selected{
            color: white;
        }
    </style>
    <script src="../js/jquery-3.1.0.min.js" type="text/javascript">
    </script>
</head>
<body>
    <div class="waikuang">
        <div class="hezuo">合作伙伴:</div>
        <div class="yincang">
            <div id="lunbo">
                <div id="imges" class="clear">
                    <img src="img/1.jpg" alt=""/>
                    <img src="img/2.jpg" alt=""/>
                    <img src="img/3.jpg" alt=""/>
                    <img src="img/4.jpg" alt=""/>
                    <img src="img/5.jpg" alt=""/>
                    <img src="img/6.jpg" alt=""/>
                    <img src="img/7.jpg" alt=""/>
                    <img src="img/8.jpg" alt=""/>
                    <img src="img/9.jpg" alt=""/>
                    <img src="img/10.jpg" alt=""/>
                    <img src="img/11.png" alt=""/>
                    <img src="img/12.jpg" alt=""/>
                    <img src="img/1.jpg" alt=""/>
                    <img src="img/2.jpg" alt=""/>
                    <img src="img/3.jpg" alt=""/>
                    <img src="img/4.jpg" alt=""/>
                    <img src="img/5.jpg" alt=""/>
                    <img src="img/6.jpg" alt=""/>
                    <img src="img/7.jpg" alt=""/>
                    <img src="img/8.jpg" alt=""/>
                    <img src="img/9.jpg" alt=""/>
                    <img src="img/10.jpg" alt=""/>
                    <img src="img/11.png" alt=""/>
                    <img src="img/12.jpg" alt=""/>
                </div>
                <div id="bottom" class="bottom">
                    <span class="selected">1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                    <span>5</span>
                    <span>6</span>
                    <span>7</span>
                    <span>8</span>
                    <span>9</span>
                    <span>10</span>
                    <span>11</span>
                    <span>12</span>
                </div>
            </div>
        </div>


    </div>
</body>
<script>
    var main = document.getElementById('lunbo');
    var imges = document.getElementById('imges');
    var spanlist = document.getElementById('bottom').getElementsByTagName('span');
    var time;
    var clickFlag=true;//设置左右切换标记位防止连续按,让连续按得效果同按一下的效果一样
    var index = 0;      //当图片滑动时底下按钮的显示
    var Distance=main.offsetWidth + 25;//获取每张图片宽度

    function clear(){
        for(var i=0;i<spanlist.length;i++){
            spanlist[i].className="";
        }
    }
    function yidong(){
        var start=imges.offsetLeft;//获取移动块当前的left的开始坐标
        var end=index*Distance*(-1);
        console.log(end);
        var change=end-start;
        var timer;//用计时器为图片添加动画效果
        var t=0;
        var maxT=40;


        clear();
        if(index==spanlist.length){
            spanlist[0].className="selected";//当轮播第一轮结束时按钮1的位置出现效果
        }else{
            spanlist[index].className="selected";
        }

        timer=setInterval(function(){
            /* debugger*/
            t++;
            if(t>=maxT){//当图片到达终点停止计时器
                clearInterval(timer);
                clickFlag=true;//当图片到达终点才能切换
            }
            imges.style.left=change/maxT*t+start+"px";//每个17毫秒让块移动
            if(index==spanlist.length&&t>=maxT){
                imges.style.left=0;
                index=0; //当图片到最后一张时把它瞬间切换回第一张，由于都同一张图片不会影响效果
            }
        },20);
    }
    //自动轮播
    time=setInterval(forward,9000);
    function forward(){
        index++;
        if(index>spanlist.length){
            index = 0;
        }
        yidong();
    }
    //按钮控制图片变动
    for(var i=0;i<spanlist.length;i++){
        spanlist[i].onclick=function(){
            index=this.innerText-1;
            yidong();
        }
    }
</script>
</html>